<template>
  <div class="company-info">
    <!-- 头部导航栏 -->
    <van-nav-bar title class="nav" fixed @click-left="onClickLeft">
      <van-icon slot="left">
        <van-icon name="arrow-left" class="nav-left" />
      </van-icon>
      <van-icon slot="right">
        <div class="icon-left" @click="guanzhu()" v-if="isguanzhu">+关注</div>
        <div class="icon-left-show" @click="guanzhu()" v-else>已关注</div>
        <van-icon name="ellipsis" class="icon-right" @click="flag=!flag">
          <div class="jubao" v-show="flag">
            <div class="kailong"></div>
            <van-icon class="jubao-icon" name="warning" />举报
          </div>
        </van-icon>
      </van-icon>
    </van-nav-bar>

    <!-- 内容部分 -->
    <div class="info-header" @click="show=!show">
      <div class="header-left">
        <div class="header-name">{{companyinfo.name}}</div>
        <p>{{companyinfo.condition}}</p>
      </div>
      <div class="header-right">
        <img :src="companyinfo.src" alt />
      </div>
    </div>
    <van-action-sheet
      v-model="show"
      :actions="actions"
      @select="onSelect"
      :overlay="false"
      class="van-sheet1"
    >
      <van-icon name="cross" size="28" class="icon-1" @click="show=false" />
      <img class="img-1" :src="companyinfo.src" alt />
      <h3>{{companyinfo.name}}</h3>
      <p>
        <span>融资阶段</span>
        <span>不需要融资</span>
      </p>
      <p>
        <span>公司规模</span>
        <span>100-999人</span>
      </p>
      <p>
        <span>所属行业</span>
        <span>计算机软件</span>
      </p>
    </van-action-sheet>

    <!-- 上班时间 -->
    <div class="info-time" @click="show1=!show1">
      <div class="time-up">
        <div class="up-left">
          <van-icon name="clock" />
          {{companyinfo.time}}
        </div>
        <div class="up-right">
          更多福利
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="time-down">
        <p class="down-left">
          <van-icon name="bag" />&nbsp;单休
        </p>
        <p class="down-right">
          <van-icon name="lock" />&nbsp;不加班
        </p>
      </div>
    </div>
    <van-action-sheet
      v-model="show1"
      :actions="actions"
      @select="onSelect"
      :overlay="false"
      class="van-sheet2"
      :close-on-click-action="true"
    >
      <van-icon name="cross" size="28" class="icon-1" @click="show1=false" />
      <h3>工作时间与福利待遇</h3>
      <p class="p1">福利信息由公司提供，可能根据实际岗位有所不同。具体岗位可与BOSS或HR确认</p>
      <h4>工作时间</h4>
      <span class="sp1">{{companyinfo.time}}</span>
      单休 不加班
      <h4>员工福利</h4>
      <div class="ygy">
        <van-icon name="star-o" size="40" class="ygy-icon" />
        <div class="ygy-txt">
          <p>五险一金</p>
          <p>缴纳养老保险、医疗保险、失业保险、工伤保险、生育保险和住房公积金</p>
        </div>
      </div>
      <div class="ygy">
        <van-icon name="underway-o" size="40" class="ygy-icon" />
        <div class="ygy-txt">
          <p>全勤奖</p>
          <p>对于全勤员工给予全勤奖</p>
        </div>
      </div>
      <div class="ygy">
        <van-icon name="flower-o" size="40" class="ygy-icon" />
        <div class="ygy-txt">
          <p>带薪年假</p>
          <p>为员工提供带薪年休假</p>
        </div>
      </div>
      <div class="ygy">
        <van-icon name="manager-o" size="40" class="ygy-icon" />
        <div class="ygy-txt">
          <p>员工旅游</p>
          <p>组织员工旅游活动</p>
        </div>
      </div>
      <div class="ygy">
        <van-icon name="logistics" size="40" class="ygy-icon" />
        <div class="ygy-txt">
          <p>免费班车</p>
          <p>配有班车，免费接送员工上下班</p>
        </div>
      </div>
      <div class="ygy">
        <van-icon name="shop-o" size="40" class="ygy-icon" />
        <div class="ygy-txt">
          <p>餐补</p>
          <p>工作餐的额外补贴</p>
        </div>
      </div>
      <div class="ygy">
        <van-icon name="points" size="40" class="ygy-icon" />
        <div class="ygy-txt">
          <p>包吃</p>
          <p>补贴员工因公实际发生的饮食费用</p>
        </div>
      </div>
      <div class="ygy">
        <van-icon name="point-gift-o" size="40" class="ygy-icon" />
        <div class="ygy-txt">
          <p>节日福利</p>
          <p>法定或特定节日时提供礼物</p>
        </div>
      </div>
      <div class="ygy">
        <van-icon name="newspaper-o" size="40" class="ygy-icon" />
        <div class="ygy-txt">
          <p>住房补贴</p>
          <p>每月员工因公实际发生的住宿费用</p>
        </div>
      </div>
      <div class="ygy">
        <van-icon name="balance-o" size="40" class="ygy-icon" />
        <div class="ygy-txt">
          <p>奖金丰厚</p>
          <p>奖金丰厚，每人100万</p>
        </div>
      </div>
    </van-action-sheet>

    <!-- 福利 -->
    <div>
      <van-tabs
        v-model="active"
        line-height="0px"
        class="info-fuli"
        background="#5f5f5f"
        :border="isborder"
        id="tabs"
      >
        <van-tab v-for="item in fuli" :key="item.id">
          <div slot="title" class="fuli">
            <van-icon :name="item.name" size="26" />
            <span>{{item.title}}</span>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!-- 公司简介 -->
    <div class="info-companydes">
      <h2>公司介绍</h2>
      <p class="jianjietxt" @click="getmoretxt()">{{companyinfo.jianjie}}</p>
    </div>

    <!-- 公司图片 -->
    <div class="info-pic">
      <h2>公司照片</h2>
      <div class="img-box">
        <img
          :class="{'pic':ispic}"
          v-for="(item,index) in a"
          :src="item"
          :key="index"
          @click="showimg(index)"
        />
      </div>
    </div>

    <!-- 公司地址 -->
    <div class="info-address">
      <h2>公司地址</h2>
      <div class="address-img">
        <img :src="companyinfo.dsrc" alt />
      </div>
      <p class="address-text">
        <span>公司还有2个其他办公地址</span>
        <span>查看全部</span>
      </p>
    </div>

    <!-- 公司官网 -->
    <div class="info-guanwang">
      <h2>公司官网</h2>
      <p class="guanwang">
        <a :href="companyinfo.guanw" target="_blank">{{companyinfo.guanw}}</a>
        <span>
          <van-icon name="arrow" />
        </span>
      </p>
    </div>

    <!-- 工商信息 -->
    <div class="info-gongshang" @click="show2=!show2">
      <h2>工商信息</h2>
      <p>
        <span>公司全称</span>
        <span>{{companyinfo.name}}</span>
      </p>
      <p>
        <span>企业法人</span>
        <span>{{companyinfo.faren}}</span>
      </p>
      <p>
        <span>注册时间</span>
        <span>{{companyinfo.regtime}}</span>
      </p>
      <p>
        <span>注册资本</span>
        <span>{{companyinfo.money}}</span>
      </p>
      <span class="watchmore">查看全部</span>
    </div>
    <van-action-sheet
      v-model="show2"
      :actions="actions"
      @select="onSelect"
      :overlay="false"
      class="van-sheet3"
    >
      <van-icon name="cross" size="28" class="icon-1" @click="show2=false" />
      <img class="img-1" :src="companyinfo.src" alt />
      <h4>{{companyinfo.name}}</h4>
      <a :href="companyinfo.guanw" target="_blank">{{companyinfo.guanw}}</a>
      <p>
        <span>企业法人</span>
        <span class="sp12">{{companyinfo.faren}}</span>
      </p>
      <p>
        <span>注册资本</span>
        <span class="sp12">{{companyinfo.money}}</span>
      </p>
      <p>
        <span>成立时间</span>
        <span class="sp12">{{companyinfo.regtime}}</span>
      </p>
      <p>
        <span>经营状态</span>
        <span class="sp12">存续（在营、开业、在册）</span>
      </p>
      <p>
        <span>注册地址</span>
        <span class="sp12">{{companyinfo.address}}</span>
      </p>
      <p>
        <span>统一信用代码</span>
        <span>914306007991114804</span>
      </p>
      <p>
        <span class="sp13">经营范围</span>
        <span
          class="sp11"
        >软件开发；集成电路设计；工程和技术研究和试验发展；软件技术转让；软件技术服务；信息系统集成服务；信息技术咨询服务；数据处理和存储服务；计算机整机制造；计算机零部件制造；软件、计算机软件；电子元件及组件、计算机、计算机零配件销售。（依法须经批准的项目，经相关部门批准后方可开展经营活动）</span>
      </p>
      <h5>
        数据来源：
        <span style="color:skyblue">企查查</span>
      </h5>
    </van-action-sheet>

    <!-- 相似公司 -->
    <div class="morecompany">
      <p>这些相似的公司</p>
      <div class="morecompany-top">
        <div class="top-left">
          <img
            src="https://img.bosszhipin.com/beijin/upload/com/logo/20190527/63acfc6f4b289bf385234026b79a03e86bbf0abb0aa8062b2f66ce3661b80b6a.png?x-oss-process=image/resize,w_120,limit_0"
            alt
          />
        </div>
        <div class="top-right">
          <span class="span1">链世网络</span>
          <span class="span2">长沙市 芙蓉区 芙蓉广场</span>
        </div>
      </div>
      <div class="morecompany-down">
        热招
        <span style="color:skyblue" class="span3">星探</span> 4-8K
      </div>
      <div class="lexx"></div>
    </div>
    <div class="morecompany">
      <div class="morecompany-top">
        <div class="top-left">
          <img
            src="https://img.bosszhipin.com/beijin/mcs/chatphoto/20171213/72307191b58eafe7434600f388b7a0d5cfcd208495d565ef66e7dff9f98764da.jpg?x-oss-process=image/resize,w_120,limit_0"
            alt
          />
        </div>
        <div class="top-right">
          <span class="span1">创研技术</span>
          <span class="span2">长沙市 岳麓区 麓谷</span>
        </div>
      </div>
      <div class="morecompany-down">
        热招
        <span style="color:skyblue" class="span3">web前端工程师</span> 7-10K
      </div>
    </div>
  </div>
</template>
<script>
import { ImagePreview } from 'vant'
export default {
  data: () => ({
    isguanzhu: true,
    flag: false,
    isborder: false,
    active: 1,
    fuli: [
      {
        id: 1,
        name: 'star-o',
        title: '五险一金'
      },
      {
        id: 2,
        name: 'underway-o',
        title: '全勤奖'
      },
      {
        id: 3,
        name: 'flower-o',
        title: '带薪年假'
      },
      {
        id: 4,
        name: 'manager-o',
        title: '员工旅游'
      },
      {
        id: 5,
        name: 'logistics',
        title: '免费班车'
      },
      {
        id: 6,
        name: 'shop-o',
        title: '餐 补'
      },
      {
        id: 7,
        name: 'points',
        title: '包 吃'
      },
      {
        id: 8,
        name: 'point-gift-o',
        title: '节日福利'
      },
      {
        id: 9,
        name: 'newspaper-o',
        title: '住房补贴'
      },
      {
        id: 10,
        name: 'balance-o',
        title: '奖金丰厚'
      }
    ],
    thums: {},
    a: [],
    companyinfo: {},
    show: false,
    actions: [],
    show1: false,
    show2: false,
    ispic: true
  }),
  activated () {
    this.id = this.$route.params.id
    this.getcompanyinfo()
    this.getlunbo()
    this.getpic()
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    },

    onSelect (item) {
      this.show = false
    },

    async getlunbo () {
      const {
        data: { status, data }
      } = await this.$http.get('/lunbo/' + this.id)
      if (status !== 1) return console.log('请求数据失败')
      this.thums = data[0]
      this.a = JSON.parse(this.thums.src)
    },

    async getcompanyinfo () {
      const {
        data: { data, status }
      } = await this.$http.get('/company/' + this.id)
      if (status !== 1) return console.log('请求数据失败')
      this.companyinfo = data[0]
    },

    guanzhu () {
      this.isguanzhu = !this.isguanzhu
    },

    getmoretxt () {
      var oTxt = document.querySelector('.jianjietxt')
      oTxt.style.whiteSpace = 'normal'
      oTxt.style.height = 'auto'
    },

    showimg (startPosition) {
      const images = []
      this.a.forEach(item => {
        if (item) images.push(item)
      })
      ImagePreview({
        images,
        startPosition
      })
    },

    getpic () {
      if (Number(this.id) === 1) {
        this.ispic = true
      } else {
        this.ispic = false
      }
    }
  }
}
</script>
<style lang="less" scoped>
.company-info {
  padding: 50px 0 50px 0;
  background: #5f5f5f;
  .nav {
    height: 50px;
    background: #5f5f5f;
    .nav-left {
      color: #fff;
      font-size: 22px;
      line-height: 50px;
    }
    .icon-left-show {
      width: 60px;
      height: 26px;
      display: inline-block;
      color: #fff;
      line-height: 22px;
      margin-right: 10px;
      border-radius: 5px;
      background: rgb(175, 174, 174);
      border: 2px solid rgb(175, 174, 174);
    }
    .icon-left {
      display: inline-block;
      color: #fff;
      border: 2px solid #fff;
      width: 60px;
      height: 26px;
      border-radius: 5px;
      line-height: 22px;
      margin-right: 15px;
    }
    .icon-right {
      font-size: 26px;
      color: #fff;
      .jubao {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        background: #000;
        border-radius: 5px;
        top: 22px;
        left: -36px;
        font-size: 15px;
        width: 74px;
        height: 32px;
        opacity: 0.6;
        z-index: 99;
        .kailong {
          width: 0;
          height: 0;
          border-right: 10px solid transparent;
          border-left: 10px solid transparent;
          border-bottom: 10px solid #000;
          opacity: 0.6;
          position: absolute;
          top: -8px;
          left: 39px;
        }
        .jubao-icon {
          color: #fff;
          font-size: 18px;
          margin-right: 5px;
        }
      }
    }
  }
  .info-header {
    display: flex;
    justify-content: space-between;
    padding: 0 15px 0;
    .header-left {
      display: flex;
      flex-direction: column;
      .header-name {
        font-size: 24px;
        font-weight: bold;
        color: #fff;
      }
      p {
        color: #ccc;
      }
    }
    .header-right {
      display: flex;
      justify-content: center;
      margin-top: 6px;
      img {
        width: 60px;
        height: 60px;
        display: block;
        border-radius: 10px;
      }
    }
  }
  .info-time {
    padding: 0 15px 0;
    color: #fff;
    .time-up {
      display: flex;
      justify-content: space-between;
      height: 40px;
      align-items: center;
      .up-right {
        color: #ccc;
      }
    }
    .time-down {
      display: flex;
      .down-right {
        margin-left: 30px;
      }
    }
  }
  .info-fuli {
    .fuli {
      box-sizing: border-box;
      background: #5f5f5f;
      color: #fff;
      border-radius: 6px;
      height: 44px;
      font-size: 14px;
      border: 1px solid #ccc;
      display: flex;
      align-items: center;
      padding-left: 5px;
      span {
        margin-left: 5px;
      }
    }
  }
  #tabs {
    width: 485px;
  }
  .info-companydes {
    padding: 0 10px 0;
    h2 {
      margin-top: 35px;
      color: #fff;
      font-size: 22px;
    }
    p {
      color: #fff;
      text-indent: 2em;
      height: 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .info-pic {
    padding: 0 10px 0;
    min-height: 170px;
    h2 {
      margin-top: 35px;
      color: #fff;
      font-size: 22px;
    }
    .img-box {
      display: flex;
      overflow: scroll;
      img {
        display: block;
        width: 210px;
        height: 130px;
        margin-right: 10px;
        border-radius: 10px;
      }
      .pic {
        display: block;
        width: 100%;
        height: 190px;
        margin-right: 10px;
        border-radius: 10px;
      }
    }
  }
  .info-address {
    padding: 0 10px 0;
    h2 {
      margin-top: 35px;
      color: #fff;
      font-size: 22px;
    }
    .address-img {
      width: 100%;
      height: 180px;
      img {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
    }
    .address-text {
      display: flex;
      justify-content: space-between;
      color: #ccc;
      font-size: 14px;
    }
  }
  .info-guanwang {
    padding: 0 10px 0;
    h2 {
      color: #fff;
      font-size: 22px;
      margin-top: 30px;
    }
    .guanwang {
      display: flex;
      justify-content: space-between;
      color: #fff;
      a {
        color: #fff;
      }
    }
  }
  .info-gongshang {
    padding: 0 10px 0;
    h2 {
      color: #fff;
      font-size: 22px;
      margin-top: 30px;
    }
    p {
      display: flex;
      justify-content: space-between;
      color: #fff;
    }
    .watchmore {
      position: relative;
      top: 0px;
      left: 294px;
      color: beige;
      background: rgba(255, 255, 255, 0.1);
      font-size: 14px;
    }
  }
  .morecompany {
    padding: 0 10px 0;
    height: 170px;
    // border-bottom: 1px solid #ccc;
    .lexx {
      background: #ccc;
      height: 1px;
      margin-top: 20px;
      opacity: 0.5;
    }
    p {
      color: #fff;
      font-size: 20px;
      margin-top: 30px;
    }
    .morecompany-top {
      display: flex;
      .top-left {
        flex: 0.7;
        img {
          width: 50px;
          height: 50px;
          display: block;
          border-radius: 10px;
        }
      }
      .top-right {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .span1 {
          color: #fff;
        }
        .span2 {
          color: #ccc;
          font-size: 14px;
        }
      }
    }
    .morecompany-down {
      color: #fff;
      margin-top: 15px;
      background: #999;
      text-indent: 20px;
      opacity: 0.8;
      border-radius: 5px;
      .span3 {
        margin-left: 20px;
        margin-right: 20px;
      }
    }
  }
  .van-sheet1 {
    .icon-1 {
      display: block;
      margin-top: 10px;
      margin-left: 10px;
    }
    .img-1 {
      width: 80px;
      height: 80px;
      display: block;
      margin: 10px auto;
    }
    h3 {
      text-align: center;
    }
    p {
      display: flex;
      justify-content: space-between;
      padding: 0 134px 0 28px;
    }
  }
  .van-sheet2 {
    .icon-1 {
      display: block;
      margin-top: 15px;
      margin-left: 15px;
    }
    h3 {
      margin-top: 25px;
      padding-left: 15px;
    }
    .p1 {
      font-size: 14px;
      border-bottom: 1px #ccc solid;
      height: 72px;
      margin-left: 15px;
      margin-right: 15px;
    }
    h4 {
      margin-top: 25px;
      padding-left: 15px;
    }
    .sp1 {
      margin-left: 15px;
      padding-bottom: 30px;
    }
    .ygy {
      display: flex;
      .ygy-icon {
        display: block;
        margin-top: 30px;
        margin-left: 15px;
      }
      .ygy-txt {
        display: block;
        width: 290px;
        margin-right: 15px;
        margin-left: 20px;
      }
    }
  }
  .van-sheet3 {
    .icon-1 {
      display: block;
      margin-top: 15px;
      margin-left: 15px;
    }
    .img-1 {
      width: 80px;
      height: 80px;
      display: block;
      margin: 20px auto;
    }
    h4 {
      text-align: center;
    }
    a {
      display: block;
      color: slateblue;
      text-align: center;
      margin-top: -18px;
    }
    p {
      display: flex;
      span {
        display: block;
        margin: 0 15px 0 15px;
      }
      .sp13 {
        width: 100px;
      }
      .sp12 {
        margin-left: 46px;
      }
      .sp11 {
        display: block;
        width: 300px;
        margin-left: 38px;
      }
    }
    h5 {
      text-align: center;
      margin-top: 45px;
    }
  }
}
</style>
